<template>
  <div class="bigbox">
    <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
    >
    </el-date-picker>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first" class="manger">
        <div class="echarts" ref="myDiv">echarts图片</div>
        <div class="list">
          <h4>学科试题数量排名</h4>
          <ul>
            <li v-for="(item, index) in list" :key="index">
              <span class="circle">{{ index + 1 }}</span>
              <span class="text">工专路 1 号店</span>
              <span>25837</span>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second" class="manger">
        <div class="echarts">echarts图片</div>
        <div class="list">列表</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
var echarts = require("echarts");
export default {
  name: "xueKePaiMing",
  data() {
    return {
      list: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      activeName: "first",
    };
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv); // 得到图表实例
    myChart.setOption({
      //   title: {
      //     text: "Stacked Area Chart",
      //   },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
      },
      toolbox: {
        // feature: {
        //   saveAsImage: {},
        // },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#6fbde3", //坐标线的颜色
            },
          },
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#6fbde3", //坐标线的颜色
            },
          },
          splitArea: {
            show: true,
            interval: 0,
            areaStyle: {
              color: ["#f9f9f9", "white"], //这里重点，用于设置颜色的数组，
              //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
            },
          },
        },
      ],
      series: [
        {
          name: "Email",
          type: "line",
          //   stack: "Total",
          areaStyle: {
            color: "#f6fafe",
          },
          emphasis: {
            focus: "series",
          },
          lineStyle: {
            // 设置线条的style等
            normal: {
              color: "#008acd", // 折线线条颜色:红色
            },
          },
          data: [120, 132, 100, 134, 90, 230, 10],
        },
        {
          name: "Union Ads",
          type: "line",

          //   stack: "Total",
          areaStyle: {
            color: "#f6fafe",
          },
          emphasis: {
            focus: "series",
          },
          lineStyle: {
            // 设置线条的style等
            normal: {
              color: "red", // 折线线条颜色:红色
            },
          },
          data: [220, 300, 191, 234, 290, 330, 310],
        },
      ],
    });
  },
};
</script>
<style lang="scss" scoped>
.bigbox {
  position: relative;
  li {
    list-style: none;
    margin-bottom: 7px;
  }
  .el-date-editor {
    position: absolute;
    top: -5px;
    right: 0;
    z-index: 999;
  }
  .manger {
    display: flex;
  }
  .echarts {
    width: 1101px;
    height: 300px;
  }
  .list {
    width: 480px;
    padding: 0 10px;
    ul {
      padding-left: 0;
    }
  }
  .list li {
    display: flex;
    justify-content: space-between;
    .circle {
      display: inline-block;
      color: black;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      margin-right: 40px;
      border-radius: 20px;
      font-size: 12px;
      background-color: #f5f5f5;
    }
    .text {
      flex: 1;
    }
  }
  .list li:nth-child(-n + 3) {
    .circle {
      display: inline-block;
      color: white;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      margin-right: 40px;
      border-radius: 20px;
      font-size: 12px;
      background-color: black;
    }
  }
}
</style>
